<template>
  <div class="project">
    <side-nav>
      <side-nav-item v-for="(i, index) in project" :key="index" :query="i.item">
        <span slot="text">{{ i.text }}</span>
        <item
          slot="item"
          v-for="(j, index1) in i.item"
          :key="index1"
          :query="j.query"
          @routerChange="routerChanges(j.query, j.path)"
        >
          <span>{{ j.text }}</span>
        </item>
      </side-nav-item>
    </side-nav>

    <div class="project-content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

    
  </div>
</template>

<script>
import Item from "../components/project/sidenav/Item.vue";
import ItemBox from "../components/project/sidenav/ItemBox.vue";
import SideNavItem from "../components/project/sidenav/SideNavItem.vue";
import SideNav from "../components/project/sidenav/SideNav.vue";
import {mapState,mapMutations} from 'vuex';

export default {
  name: "project",
  data() {
    return {
    
    };
  },
  components: {
    Item,
    ItemBox,
    SideNavItem,
    SideNav,
  },
  activated() {
    if (this.keepquery == "") {
      this.$router.push({
        name: "projectcontent",
        params: {
          sequence:"UniApp微信点餐小程序",
        },
      });
    } else {
      this.$router.push(this.keepquery);
    }
  },
  beforeRouteLeave(to, from, next) {
    this.updataProjectQuery(this.$route.path)
    next();
  },
  methods: {
    ...mapMutations([
      'updataProjectQuery'
    ]),
    routerChanges(query, path) {
      this.$router.push({
        name: "projectcontent",
        params: {
          sequence: query,
        },
      });
    },
  },
  computed:{
    ...mapState({
      project: (state) => state.projectdata.project.data,
      keepquery:(state)=>state.projectdata.project.keepquery
    })
  }
};
</script>

<style lang="scss" scoped>
.project{
  width: 100vw;
  padding-top: 10px;
  display: flex;
  @include background-color($bgcolor-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.project-content {
  flex: 10;
  z-index: 1;
}
</style>
